<template>
  <view class="event-return">
    <view class="event-detail-top">
      <view class="event-title "> {{ detailData.zxTaskName }} </view>
      <view class="event-time">任务开始时间：{{ detailData.startTime }}</view>
      <view>任务结束时间：{{ detailData.endTime }}</view>
    </view>
    <view class="event-content">
      <view class="event-detail-item">
        <span>任务内容：</span> <span>{{ detailData.content }}</span>
      </view>
      <view class="event-detail-item">
        <span>完成情况：</span> <span>{{ detailData.completeDescription || ''}}</span>
      </view>
      <!-- <view class="event-detail-item">
        <span>备注：</span> <span>暂无数据</span>
      </view> -->
      <view>附件：</view>
      <view class="event-detail-item ">
        <FileListDisplay :data="detailData.pic"></FileListDisplay>
      </view>
    </view>
  </view>
</template>

<script>
import * as SpecialTask from "@/api/special-task.js"
import {
  formatDate,
  formatRichText
} from "@/utils/common.js"
import FileListDisplay from "@/components/file-display/file-list-display"
export default {
  components: { FileListDisplay },
  data() {
    return {
      detailData: {
        zxTaskName: '',
        startTime: '',
        endTime: '',
      },
    };
  },
  methods: {
    gotoBack(item) {
      uni.navigateBack();
    },
  },
  onLoad(options) {
    const { id } = options;
    SpecialTask.getSpecialDetail({ id }).then(res => {
      this.detailData = {
        ...res.data,
        pic: res.data.pic && res.data.pic.split(','),
        startTime: formatDate(res.data.startTime),
        endTime: formatDate(res.data.endTime)
      }
    })
  }
}
</script>

<style lang="scss">
page {
  background-color: #ffffff;
}

.event-detail-top {
  width: 686rpx;
  background: #F6F6F6;
  border-radius: 4rpx;
  text-align: center;
  font-weight: 400;
  font-size: 24rpx;
  color: #999999;
  margin: 0 auto 32rpx;
  padding: 32rpx;

  .event-title {
    font-size: 32rpx;
    color: #333333;
    font-weight: 500;
  }

  .event-time {
    margin: 16rpx 0;
  }
}

.event-content {
  font-weight: 400;
  font-size: 28rpx;
  color: #666666;
  margin: 32rpx;

  .event-detail-item {
    margin-bottom: 20rpx;
  }

}
</style>